<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>アイテム入れ替え</title>

<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sortable1,#sortable2,#sortable3 {
	list-style-type: none;
	margin: 0px 10px 0px 0px;
	padding: 5px;
	border: 1px solid #666666;
	width: 30%;
	float: left;
	background-color: lightblue; /* ハイライト使えればいらない */
}

#sortable1 td{
	margin: 0px 5px 5px 5px;
	padding: 5px;
	width: 150px;
	height: 150px;
}

#sortable1 td div{
	/*
	 * テーブルの高さ確保
	 */
	height: 150px;
	width: 150px;
}

#sortable1 td.image img{
	/*
	 * テーブル内の画像は最大100pxにしておこう
	 */
	max-height: 100px;
	max-width: 100px;
}

.ui-state-highlight {
	height: 1.5em;
	width: 100px;
	border-style: dashed;
}
</style>
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		var sortable1 = $("#sortable1 tbody tr td.image").sortable({
			connectWith : 'tbody tr td.image',
			placeholder : 'ui-state-highlight',
			revert : 300, // 要素の吸着にアニメーション（時間）をかける
			opacity:0.7,
			//cursor: 'crosshair', // カーソル種類
			//grid:[50,50], // ドラッグ中のカーソルがカクカク（吸着）する
			//cursorAt : {left : 5}, // 要素をドラッグ中の、要素上のカーソル位置
		}).disableSelection();
		
		// TODO 確認用
		$("#sortable1").bind('sortupdate',
			function(event, ui) {
				// TODO 要素がうまくとれない
				//alert('serialize:' + $('#sortable1').sortable('serialize')[0].toString());
				//alert('toArray:' + $('#sortable1').sortable('toArray').toString());
			}
		);
		
		// TODO すでにイメージが置いてあるセルにはドロップできなくする。
		$("#sortable1").bind('sortstop',
			function(event, ui) {
				
				//alert('targetId:' + event.target.id); // 移動する要素のid
				
				// 移動先のイメージ要素数を数えたい
				// TODO 移動する要素ではだめ
				//alert( $('#' + event.target.id).size() );
				
				// 元の位置に戻す
				// TODO セル単位で一時的に無効にできれば理想的（ハイライト表示もされない方がいい）
				//sortable1.sortable('cancel');
			}
		);
	});
</script>
</head>
<body>
	<h2>イメージ入れ替え（テーブル）</h2>
	<p>D&amp;Dで要素の移動</p>
	<table id="sortable1">
		<tbody>
			<!-- imgとテキストはdivで囲まないと連れて行ってくれない -->
			<tr class="ui-state-default">
				<td class="image" id="img_1">1<div><img id="pic001" src="../images/ikd.jpg" />ikd.jpg</div></td>
				<td class="image" id="img_2">2<div><img id="pic003" src="../images/kuma1.gif" />kuma1.gif</div></td>
				<td class="image" id="img_3">3</td>
				<td class="image" id="img_4">4</td>
				<td class="image" id="img_5">5</td>
			</tr>
			<tr class="ui-state-default">
				<td class="image" id="img_6">6<div><img id="pic002" src="../images/kuma.gif" />kuma.gif</div></td>
				<td class="image" id="img_7">7<div><img id="pic004" src="../images/kuma2.gif" />kuma2.gif</div></td>
				<td class="image">8</td>
				<td class="image">9</td>
				<td class="image">10</td>
			</tr>
			<tr class="ui-state-default">
				<td class="image">11</td>
				<td class="image">12</td>
				<td class="image">13</td>
				<td class="image">14</td>
				<!-- こういうのはだめにしたい -->
				<!-- 
				<td class="image">15<div><img id="pic002" src="../images/kuma.gif" />kuma.gif</div><div><img id="pic002" src="../images/kuma.gif" />kuma.gif</div></td>
				 -->
				<td class="image">15</td>
			</tr>
		</tbody>
	</table>
	<div style="clear : both" />
</body>
</html>